<template>
	<view class="wrap">
		<view class="state-box">
			<view class="info">
				<text class="state">待付款</text>
				<text class="tips">59分5秒后自动取消订单</text>
			</view>
		</view>
		
		<view class="main-box">	
			<view class="logistics-box">
				<view class="logistics">
					<view class="info">
						<text class="process">已发货</text>
						<text class="depict">快递已被重庆xxx快递点收取</text>
					</view>
					<u-icon name="arrow-right" size="14" color="#ccc"></u-icon>
				</view>
				<view class="receiver">
					<view class="contacts">
						<text>{{ order.recUsername }}</text>
						<text>{{ order.recPhone }}</text>
					</view>	
					<text class="address">{{ order.recAddress }}</text>
				</view>	
			</view>	
			
			<view class="order-box">
				<view class="product-item" v-for="product in order.productList" :key="product.id">
					<view class="product">
						<view class="photo">
							<u--image :src="product.cover" width="136rpx" height="136rpx"></u--image>
						</view>	
						<view class="info">
							<u--text :text="product.title" :lines="1" :block="true" size="14px"></u--text>
							<u--text :text="product.specs" :lines="1" :block="true" size="12px" color="#acacac"></u--text>
						</view>
					</view>
					<view class="cost">
						<text class="price">￥{{ product.price }}</text>
						<text class="quantity">x {{ product.num }}</text>
					</view>
				</view>
				
				<view class="sellte">
					<view class="order-cell">
						<view>商品总金额</view>
						<view>￥{{ order.productTotalPrice }}</view>
					</view>
					<view class="order-cell">
						<view>运费</view>
						<view>￥{{ order.freightAmount }}</view>
					</view>
					<view class="order-cell" v-if="order.discountAmount > 0">
						<view>优惠</view>
						<view>-￥{{ order.discountAmount }}</view>
					</view>
					<view class="order-cell">
						<view>实付</view>
						<view>￥{{ order.actualAmount }}</view>
					</view>
				</view>
			</view>
				
			<view class="seq-box">
				<view class="order-cell">
					<view>订单编号</view>
					<view>{{ order.orderNumber }}</view>
				</view>
				<view class="order-cell">
					<view>创建时间</view>
					<view>{{ order.created }}</view>
				</view>
				<view class="order-cell" v-if="order.payTime">
					<view>付款时间</view>
					<view>{{ order.payTime }}</view>
				</view>
				<view class="order-cell" v-if="order.sendTime">
					<view>发货时间</view>
					<view>{{ order.sendTime }}</view>
				</view>
				<view class="order-cell" v-if="order.recTime">
					<view>收货时间</view>
					<view>{{ order.recTime }}</view>
				</view>
			</view>
				
			<view class="service-box">
				<view class="service-btn">
					<u-icon name="chat" size="18px" color="#166bbb"></u-icon>
					<text class="text">联系客服</text>
				</view>
			</view>
			
			<view class="anti-collapse"></view>
		</view>
				
		<view class="toolbar">
			<u-icon name="more-dot-fill" size="14" color="#555"></u-icon>
			<view class="handler">
				<button type="default" class="btn">取消订单</button>
				<button type="default" class="btn primary-btn">支付</button>
			</view>	
		</view>	
	</view>
</template>

<script>
import { orderDetail } from '@/api/uc/order.js';

export default {
	onLoad(options) {
		// options.id = 4;
		if(options.id != undefined) {
			this.order.id = options.id;
			this.init();
		}
	},
	data() {
		return {
			order: {
				id: 0,
				productList: []
			}
		}
	},
	methods: {
		init() {
			orderDetail(this.order.id).then(res=>{
				this.order = res.data.order;
			});
		}
	}	
}	
</script>

<style lang="less">
.wrap {
	display: flex;
	flex-direction: column;
	background: #f4f4f4;
}
	
.main-box {
	position: relative;
	top: -40px;
}	

.state-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 140px;
	background: #9a3333;
	color: #fff;
	
	.info {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100px;
		align-items: center;
		justify-content: center;
		
		.state {
			font-size: 18px;
			margin-bottom: 5px;
		}
		
		.tips {
			font-size: 12px;
			color: #ccc;
		}
	}
}
	
.logistics-box {
	margin: 0 24rpx;
	padding: 0 24rpx;
	border-radius: 5px;
	background: #fff;
	
	.logistics {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1px solid #eee;
		
		.info {
			display: flex;
			flex-direction: column;
			
			.process {
				margin-bottom: 5px;
				font-size: 14px;
				color: #000;
			}
			
			.depict {
				font-size: 12px;
				color: #acacac;
			}
		}
	}
	
	.receiver {
		display: flex;
		flex-direction: column;
		padding: 24rpx 0;
		
		.contacts {
			display: flex;
			flex-direction: row;
			font-size: 14px;
			color: #000;
			margin-bottom: 5px;
			
			text {
				margin-right: 10px;
			}
		}
		
		.address {
			font-size: 12px;
			color: #999;
		}
		
	}
	
	
}
	
.order-box {
	margin: 24rpx;
	padding: 24rpx;
	border-radius: 5px;
	background: #fff;
	
	.product-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		.product {
			display: flex;
			flex-direction: row;
			
			.info {
				display: flex;
				flex-direction: column;
				margin: 0 12rpx;
			}
		}
		
		.cost {
			display: flex;
			flex-direction: column;
			text-align: right;
			
			.price {
				font-size: 12px;
			}
			
			.quantity {
				font-size: 11px;
				color: #acacac;
			}
		}
	}
	
	.sellte {
		margin-top: 15px;
	}
}
	
.order-cell {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 12rpx 0;
	font-size: 13px;
	color: #3e3e3e;
} 	

.seq-box {
	margin: 24rpx;
	padding: 24rpx;
	border-radius: 5px;
	background: #fff;
}

.service-box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 48rpx 24rpx;
		
	.service-btn {
		display: flex;
		flex-direction: row;
		
		.text {
			margin: 0 2px;
			color: #166bbb;
			font-size: 14px;
		}
	}	
}

.toolbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 50px;
	width: 100%;
	padding: 0 24rpx;
	border-top: 1px solid #eee;	
	box-sizing: border-box;
	
	.handler {
		display: flex;
		flex-direction: row;
		
		.btn {
			display: flex;
			width: 92px;
			height: 32px;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-left: 10px;
		}
		
		.primary-btn {
			background: #9a3333;
			color: #fff;
		}
	}
}

.anti-collapse {
	width: 100%;
	height: 60px;
}
</style>